<template>
    <ul >
      <my-button>哈哈哈哈</my-button>
        <li v-for='item in data' :key='item'>{{item}} <my-button @click='del(item)'/></li>
        
      <my-button ref='q1' v-bind='$attrs'/>
    </ul>
</template>
<script>
// @ is an alias to /src
import button from './button'
export default {
    // props:['data'],
    props:{
      data:{
        type:Array,// 若是 Object 或者 Array 我们的default需要是一个函数
        default(){
          // 给默认值的
          return [666,6566]
        },
        required:true, // 参数是否是必传的
        validator(val){
          // 用户自己定义的规则
          // val 就是这个而变量对应的值
          // 返回值是true的时候  验证通过
          // 返回值是false  验证不通过
          if(val.length>=5){
            console.error('长度超过了5')
          }
          return val.length < 5
        }
      }
    },
    data() {
        return {
        
        }
    },
    created() {
      console.log(this)
    },
    // updated() {
    //   console.log(this.$parent.ary)
    //   console.log(this.$refs.q1)
    // },
    methods: {
      del(item){
        console.log(item)
        let t  =  this.data.filter(val=>val!=item);
        // this.$emit('change',t)
        this.$listeners.change(t)
      }
    },
    components: {
        'my-button':button
    }
}
</script>
<style lang="less">

</style>